<template>
    <view class="container">
        <form @submit="formSubmit" @reset="formReset">
            <view class="item uni-column">
                <view class="title">switch</view>
                <view>
                    <switch name="switch" />
                </view>
            </view>
            <view class="item uni-column">
                <view class="title">radio</view>
                <radio-group name="radio">
                    <label>
                        <radio value="radio1" /><text>选项一</text>
                    </label>
                    <label>
                        <radio value="radio2" /><text>选项二</text>
                    </label>
                </radio-group>
            </view>
            <view class="item uni-column">
                <view class="title">checkbox</view>
                <checkbox-group name="checkbox">
                    <label>
                        <checkbox value="checkbox1" /><text>选项一</text>
                    </label>
                    <label>
                        <checkbox value="checkbox2" /><text>选项二</text>
                    </label>
                </checkbox-group>
            </view>
            <view class="item uni-column">
                <view class="title">slider</view>
                <slider value="50" name="slider" show-value></slider>
            </view>
            <view class="item uni-column">
                <view class="title">input</view>
                <input class="uni-input" name="input" placeholder="这是一个输入框" />
            </view>
            <view>
                <button form-type="submit">Submit</button>
                <button type="default" form-type="reset">Reset</button>
            </view>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            formSubmit: function(e) {
                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                var formdata = e.detail.value
                uni.showModal({
                    content: '表单数据内容：' + JSON.stringify(formdata),
                    showCancel: false
                });
            },
            formReset: function(e) {
                console.log('清空数据')
            }
        }
    }
</script>

<style>
    switch {
        transform: scale(0.7);
    }
    radio {
        transform: scale(0.7);
    }
    checkbox {
        transform: scale(0.7);
    }
    .container {
        padding: 40upx;
    }
</style>